<template>
	<view v-if="show">
		<!-- 底部 -->
		<view class="gui-popup gui-flex gui-columns gui-justify-content-end" :style="{
			backgroundColor:bgColor, 
			zIndex:zIndex, 
			top:top+'px',
			animationDuration:duration+'ms'
		}" v-if="position == 'bottom'" :class="[out ? 'gui-fade-out' : 'gui-fade-in']" ref="guipopup" @tap.stop="closebysd"
			@touchmove.stop.prevent="stopfun">
			<view class="gui-popup-content gui-popup-bottom" @tap.stop="stopfun" ref="guiPopupBottom"
				:class="[out ? 'gui-bottom-out' : 'gui-bottom-in']" :style="{animationDuration:duration+'ms'}">
				<!-- <slot></slot> -->
				<view class="gui-relative gui-box-shadow gui-img-in gui-bg-gray">
					<text class="popup-title">优惠券</text>
					<view class="popup-content">
						<view class="item" v-if="coupons.length>0">
							<scroll-view :show-scrollbar="false" :scroll-y="true" style="height:600rpx;"
								:scroll-top="0">
								<view class="margin-top" v-for="(item, index) in coupons" :key="index"
									:data-number="item.number" :data-btn="item.btn" @tap="getIt(index)">
									<hb-select-coupons :coupon="item"></hb-select-coupons>
								</view>
							</scroll-view>
						</view>
						<view class="address gui-flex gui-rows gui-justify-content-center" v-else>
							<image class="address-null" src="https://shop.hb.hobooa.com/images/noCoupon.png" mode=""></image>
						</view>
					</view>
					<!-- iphone 底部操作按钮躲避 -->
					<gui-iphone-bottom></gui-iphone-bottom>
					<!-- 关闭按钮 -->
					<!-- <text class="gui-block-text demo-close gui-icons gui-color-gray gui-absolute-rt"
					@tap.stop="closeCoupons">&#xe610;</text> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef APP-NVUE
	const animation = weex.requireModule('animation');
	var graceJS = require('@/plugin/GraceUI5/js/grace.js');
	// #endif
	export default {
		name: "coupons-popup",
		props: {
			bgColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.7)'
			},
			position: {
				type: String,
				default: 'center'
			},
			width: {
				type: String,
				default: '580rpx'
			},
			canCloseByShade: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: Number,
				default: 99999
			},
			top: {
				type: Number,
				default: 0
			},
			duration: {
				type: Number,
				default: 280
			},
			coupons: {
				type: Array,
				default: [{
						color: '#9F6DFA',
						ltBg: "#FFFFFF",
						height: '180rpx',
						unit: "￥",
						number: 5,
						txt: "满50元可用",
						title: "全场通用券",
						desc: "有效期至 2018-05-20",
					},
					{
						color: '#ccc',
						ltBg: "#FFFFFF",
						height: '180rpx',
						unit: "￥",
						number: 10,
						txt: "满50元可用",
						title: "电器专场用券",
						desc: "有效期至 2018-05-28",
					}
				]
			}
		},
		data() {
			return {
				show: false,
				out: false,
			}
		},

		methods: {
			getIt(e) {
				for (let i = 0; i < this.coupons.length; i++) {
					this.coupons[i].checked = false;
					this.$parent.couponId = 0;
					this.$parent.showCouponsTitle = "请选择"
					this.$parent.showCouponsNum = 0.00;
				}
				this.coupons[e].checked = true;
				this.$parent.couponId = this.coupons[e].cid;
				this.$parent.showCouponsTitle = this.coupons[e].txt;
				this.$parent.showCouponsNum = this.coupons[e].number;
				this.$parent.closeCoupons();


			},
			open: function() {
				this.out = false;
				this.show = true;
				// #ifdef APP-NVUE
				this.weexAnimateIn();
				// #endif
			},
			closebysd: function() {
				if (this.canCloseByShade) {
					this.close();
				}
			},
			close: function() {
				this.out = true;
				// #ifdef APP-NVUE
				this.weexAnimateOut();
				// #endif
				setTimeout(() => {
					this.show = false;
					this.$emit('close');
				}, 350);
			},
			stopfun: function(e) {
				e.stopPropagation();
				return null;
			},

			// #ifdef APP-NVUE
			weexAnimateIn: function() {
				graceJS.getRefs('guipopup', this, 0, (guipopupref) => {
					animation.transition(guipopupref, {
						styles: {
							opacity: 1
						},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});

				if (this.position == 'center') {
					graceJS.getRefs('guiPopupCenter', this, 0, (guipopupref) => {
						animation.transition(guipopupref, {
							styles: {
								transform: 'scale(1)'
							},
							duration: this.duration, //ms
							timingFunction: 'ease',
							delay: 0 //ms
						});
					});
				} else if (this.position == 'bottom') {
					graceJS.getRefs('guiPopupBottom', this, 0, (guipopupref) => {
						animation.transition(guipopupref, {
							styles: {
								transform: 'translateY(0px)'
							},
							duration: this.duration, //ms
							timingFunction: 'ease',
							delay: 0 //ms
						});
					});
				}

			},
			weexAnimateOut: function() {
				graceJS.getRefs('guipopup', this, 0, (guipopupref) => {
					animation.transition(guipopupref, {
						styles: {
							opacity: 0
						},
						duration: this.duration, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					});
				});

				if (this.position == 'center') {
					graceJS.getRefs('guiPopupCenter', this, 0, (guipopupref) => {
						animation.transition(guipopupref, {
							styles: {
								transform: 'scale(0.3)'
							},
							duration: this.duration, //ms
							timingFunction: 'ease',
							delay: 0 //ms
						});
					});
				} else if (this.position == 'bottom') {
					graceJS.getRefs('guiPopupBottom', this, 0, (guipopupref) => {
						animation.transition(guipopupref, {
							styles: {
								transform: 'translateY(600px)'
							},
							duration: this.duration, //ms
							timingFunction: 'ease',
							delay: 0 //ms
						});
					});
				}
			},
			// #endif
		}
	}
</script>
<style>
	.gui-popup {
		width: 750rpx;
		position: fixed;
		z-index: 99999;
		left: 0;
		top: 0;
		bottom: 0;
		flex: 1;
	}

	.gui-popup-content {
		overflow: hidden;
	}

	.gui-fade-out {
		opacity: 0;
	}

	.gui-popup-bottom {
		transform: translateY(600px);
	}

	.margin-top {
		margin-top: 20rpx;
	}

	.demo-close {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 34rpx;
	}

	.popup-title {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.popup-btn {
		width: 700rpx;
		margin: 50rpx 25rpx 0rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1db0fc;
		border-radius: 50rpx;
	}

	.popup-btn .text,
	.pay-btn .text,
	.footer .pay .text {
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}

	.popup-content {
		width: 700rpx;
		margin: 0 25rpx 10rpx;
	}

	.address-null {
		width: 420rpx;
		height: 340rpx;
		margin-bottom: 30rpx;
	}

	/* #ifndef APP-NVUE */
	.gui-popup {
		height: 100%;
	}

	/* #endif */
</style>
